<template>
  <div class="carModelDetailMain h100">
    <div class="carModelDetailMainBottom">
      <a-tabs @change="changeTab" class="tabCommon" :active-key="activeKey">
        <!-- 升级信息 -->
        <a-tab-pane :key="1" tab="升级信息">
          <upgrade-info-list></upgrade-info-list>
        </a-tab-pane>
        <!-- 报文日志 -->
        <a-tab-pane :key="2" tab="报文日志">
          <datagram-logs-list></datagram-logs-list>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>
<script>
import { STable } from '@/components'
import UpgradeInfoList from '@/views/vehicle/components/UpgradeInfoList.vue'
import DatagramLogsList from '@/views/vehicle/components/DatagramLogsList.vue'
export default {
  components: {
    STable,
    UpgradeInfoList,
    DatagramLogsList
  },
  props: {
  },
  computed: {
  },
  data () {
    return {
      activeKey: 1
    }
  },
  methods: {
    changeTab (key) {
      this.activeKey = key
    }
  }
}
</script>
<style scoped lang="less">
.carModelDetailMain {
  display: flex;
  flex-direction: column;
  .carModelDetailMainTop {
    margin-bottom: 20px;
    flex: none;
    >.ant-row-flex {
      align-items: center;
    }
    .carIconCol {
      margin-right: 20px;
    }
    .carIcon {
      font-size: 74px;
    }
    .carModelDetailMainTopDesc {
      >h5 {
        font-size:18px;
        font-weight: 600;
        margin-bottom: 10px;
        display: flex;
      }
      >p{
        font-size: 1em;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
